import { createApp, h } from 'vue'
let index = 0
const showMsg = (msg: string, type: 'success' | 'error' = 'success') => {
  const div = document.createElement('div')
  document.body.appendChild(div)
  div.className = `message-box-${index}`
  // 添加样式
  const style = document.createElement('style')
  style.textContent = `
    .message-box-${index} {
      position: fixed;
      top: ${index * 50 + 20}px;
      left: 50%;
      transform: translateX(-50%);
      background-color: ${type === 'success' ? '#f0f9eb' : '#FEF0F0'};
      border: 1px solid ${type === 'success' ? '#e1f3d8' : '#FEE4E4'};
      padding: 10px 20px;
      border-radius: 4px;
      box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
      z-index: 9999;
      transition: all 0.3s ease-in-out;
      animation: fadeIn-${index} 2s ease-in-out;
      opacity: 0;
    }
    .message-content-${index} {
      color: ${type === 'success' ? '#67c23a' : '#F88F8F'};
      font-size: 14px;
    }
    @keyframes fadeIn-${index} {
      0%, 100% {
        transform: translate(-50%, -100%);
        opacity: 0;
      }
      10%, 90% {
        transform: translate(-50%, 0);
        opacity: 1;
      }
  `
  document.head.appendChild(style)
  const MessageBox = {
    props: ['msg'],
    render(ctx: any) {
      const { $props } = ctx
      return h('div', { class: `message-content-${index}` }, $props.msg)
    },
  }
  const app = createApp(MessageBox, {
    msg,
  })
  app.mount(div)
  setTimeout(() => {
    app.unmount()
    div.remove()
    style.remove()
    index--
  }, 2000)
  index++
}
export default showMsg
